<script setup lang="ts">
import { computed, ref } from 'vue'

const onReachBottom = async () => {

}
const hotSpotData = ref([
    {
        id: 1,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
    {
        id: 3,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
    {
        id: 2,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
    {
        id: 4,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
    {
        id: 5,
        date: '5/17',
        time: '12:00',
        platform: 'XX平台',
        title: '最新政策标题',
        minortitle: '政策全文',
        text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
        user_img: '',
        comment: '发表评论内容',
    },
])

const selectedTab = ref('recent')
// const selectedTab = ref('all')
const selectTab = (tab: string) => {
    selectedTab.value = tab;
}

// 伸缩盒子展开
// 第1盒子
const isenter = ref(false);

function toggle() {
    isenter.value = !isenter.value;
}

const item = ref(21)
const itemCount = item.value // 内部盒子的数量
// 动态计算容器高度
const cont1Boxs = computed(() => {
    const baseHeight = 200; // 初始高度
    const itemHeight = 66; // 每个内部盒子的高度 + margin
    const itemsPerRow = 2; // 每行的盒子数量
    const numRows = Math.ceil(itemCount / itemsPerRow); // 计算行数
    const expandedHeight = baseHeight + itemHeight * numRows + 60; // 额外的40是给最后一行的 margin

    return {
        maxHeight: isenter.value ? `${expandedHeight}rpx` : `${baseHeight}rpx`,
        overflow: 'hidden',
        transition: 'max-height 0.3s'
    };
});


// 第2个盒子
const isExpandeds = ref(false);
function toggleExpandeds() {
    isExpandeds.value = !isExpandeds.value;
}
const items = ref(12)
const itemCounts = items.value; // 内部盒子的数量
// 动态计算容器高度
const cont1BoxsStyles = computed(() => {
    const baseHeight = 200; // 初始高度
    const itemHeight = 66; // 每个内部盒子的高度 + margin
    const itemsPerRow = 2; // 每行的盒子数量
    const numRows = Math.ceil(itemCounts / itemsPerRow); // 计算行数
    const expandedHeight = 200 + itemHeight * numRows + 40; // 额外的40是给最后一行的 margin

    return {
        maxHeight: isExpandeds.value ? `${expandedHeight}rpx` : `${baseHeight}rpx`,
        overflow: 'hidden',
        transition: 'max-height 0.3s'
    };
});
// 第3个盒子
const Istes = ref(false)
function toggles() {
    Istes.value = !Istes.value;
}
const item1 = ref(12)
const itemCount1 = item1.value; // 内部盒子的数量
// 动态计算容器高度
const cont2Boxs = computed(() => {
    const baseHeight = 200; // 初始高度
    const itemHeight = 66; // 每个内部盒子的高度 + margin
    const itemsPerRow = 2; // 每行的盒子数量
    const numRows = Math.ceil(itemCount1 / itemsPerRow); // 计算行数
    const expandedHeight = 200 + itemHeight * numRows + 40; // 额外的40是给最后一行的 margin

    return {
        maxHeight: Istes.value ? `${expandedHeight}rpx` : `${baseHeight}rpx`,
        overflow: 'hidden',
        transition: 'max-height 0.3s'
    };
});
</script>

<template>
    <view class="viewport">
        <view class="mid-box">
            <view class="newtite-box">
                <text class="title-box1">债帮帮团队出品</text>
                <image src="https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg" mode="scaleToFill"
                    class="img-box" />

                <text class="title-box2">各大平台最新政策</text>
                <text class="tit-min">紧跟平台动态 破除信息壁垒</text>

            </view>
        </view>
        <view class="min-box">
            <view class="mi-box1" :class="{ active: selectedTab === 'recent' }" @click="selectTab('recent')">最近更新</view>
            <view class="mi-box2" :class="{ active: selectedTab === 'all' }" @click="selectTab('all')">所有平台</view>
        </view>
        <view v-if="selectedTab === 'recent'">
            <scroll-view scroll-y refresher-enabled @onReachBottom="onReachBottom" class="scroll-view">
                <view class="hot-spot">
                    <view class="hot-box">
                        <view v-for="(item, index) in hotSpotData" :key="index" class="list-box">
                            <view class="time"><span class="date">{{ item.date }}</span>|{{ item.time }}</view>
                            <view class="info-box">
                                <view class="title"><span class="platform">{{ item.platform }}</span>：{{ item.title }}
                                </view>
                                <view class="minor-title">{{ item.minortitle }}：</view>
                                <view class="text">{{ item.text }}</view>
                                <view class="comment-box">
                                    <view class="comment-list">
                                        <img src="" alt="" class="user-img" />
                                        <view class="comment">{{ item.comment }}</view>
                                    </view>
                                </view>
                                <view class="footer">
                                    <view class="num-box">
                                        <veiw class="column">
                                            <uni-icons type="eye" color="#cdcdcd" size="22"></uni-icons>
                                            <view class="data-text">1万浏览量</view>
                                        </veiw>
                                        <veiw class="column">
                                            <uni-icons type="chat" color="#cdcdcd" size="22"></uni-icons>
                                            <view class="data-text">50评论</view>
                                        </veiw>
                                    </view>
                                    <view class="feature-box">
                                        <veiw class="feature-text">查看详情</veiw>
                                        <navigator url="/pages/newList/newList" open-type="navigate"
                                            hover-class="navigator-hover">
                                            <uni-icons type="right" color="#F2BB16" size="25"></uni-icons>
                                        </navigator>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="loading-text">
                        没有更多数据了~
                    </view>
                </view>
            </scroll-view>
        </view>
        <view v-if="selectedTab === 'all'" class="container">
            <view class="cont">
                <view class="souk">
                    <uni-icons type="search" size="25" color="#C0BFBF" style="margin-left: 20rpx;"></uni-icons>
                    <input type="text" placeholder="关键词搜索" class="sous">
                </view>
                <view class="he1">
                    <text class="yinhangs">网贷平台列表</text>
                    <view class="hangs" :style="cont1BoxsStyles">
                        <view v-for="index in items" :key="index" class="hang-items">
                            <p class="hangss">www</p>
                        </view>
                    </view>
                    <view class="zh-shs" @click="toggleExpandeds">
                        {{ isExpandeds ? '收起' : '展开' }}
                        <span class="arrows">{{ isExpandeds ? '▲' : '▼' }}</span>
                    </view>
                </view>

                <view class="he2">
                    <view class="hes"></view>
                    <text class="da-box">银行列表</text>
                    <view class="da-box1" :style="cont1Boxs">
                        <view v-for="index in itemCount" :key="index" class="da-box2">
                            <text class="da-box3">www</text>
                        </view>

                    </view>
                    <view class="zh" @click="toggle">
                        {{ isenter ? '收起' : '展开' }}
                        <span class="arr">{{ isenter ? '▲' : '▼' }}</span>
                    </view>
                </view>

                <view class="he3">
                    <view class="hes"></view>
                    <text class="da-box">网贷平台列表</text>
                    <view class="da-box1" :style="cont2Boxs">
                        <view v-for="index in 19" :key="index" class="da-box2">
                            <text class="da-box3">www</text>
                        </view>
                    </view>
                    <view class="zh" @click="toggles">
                        {{ Istes ? '收起' : '展开' }}
                        <span class="arr">{{ Istes ? '▲' : '▼' }}</span>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
// page {
//   // position: relative;
//   height: 100%;
//   overflow: hidden;
// }
.scroll-view {
    flex: 1;
    overflow: hidden;
}

@import './newlow'
</style>
